<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <body>
        <ui:composition template="./template.xhtml">
            <ui:define name="navigation">
                <ul>
                    <li><h:link value="#{msg.changeUserData}" outcome="index"/></li>
                    <li><h:link value="#{msg.backToLounge}" outcome="index"/></li>
                    <li><h:link value="#{msg.logout}" outcome="index"/></li>                  
                </ul>
            </ui:define>
            <ui:define name="content">  
                <div id="info_area">
                  
                    <h2>#{msg.gameInfo}</h2>
                    <table class="game_info" summary="#{msg.score}">
                        <tbody>
                            <tr class="accessibility">
                                <th>Information</th>
                                <th>#{msg.value}</th>
                            </tr>
                            <tr>
                                <th>#{msg.numberPlayers}</th>
                                <td><h:outputText value="#{gameBean.numberOfPlayers}" /></td>
                            </tr>
                            <tr>
                                <th>#{msg.leader}</th>
                                <td><h:outputText id="leader" value="#{gameBean.leaderName}" /></td>
                            </tr>
                            <tr>
                                <th>#{msg.currentRound}</th>
                                <td><h:outputText id="currentRound" value="#{gameBean.currentRound}" /></td>
                            </tr>
                            <tr>
                                <th>#{msg.time}</th>
                                <td><h:outputText id="time" value="#{gameBean.time}" /></td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <h2>#{msg.players}</h2>
                    <table class="game_info" summary="#{msg.playerNames}">
                        <tbody>
                            <tr class="accessibility">
                                <th>#{msg.playerNumber}</th>
                                <th>#{msg.playerName}</th>
                            </tr>
                            <ui:repeat value="#{gameBean.players}" var="players">
                                <tr>
                                    <th>#{msg.player} #{players.playerID+1}</th>
                                    <td><h:outputText value="#{players.username}" /></td>
                                </tr>
                            </ui:repeat>
                        </tbody>
                    </table>
                </div>
                
                <div id="dicearea">
                    <hr class="accessibility" />
                    <h2 class="accessibility"><h:outputText value="#{msg.dice}"/></h2>
                    <h:form id="dice">
                        <span title="#{msg.playerName}">#{gameBean.getPlayerName()}</span>
                        <h:commandLink id="rollDice" action="#{gameBean.startTurn()}">
                            <f:ajax event="click" render="dice :leader :currentRound :time :fields :homefields :goalfields :oppInfo" execute="#{gameBean.startTurn()}" />
                            <h:graphicImage id="wuerfel" value="/resources/img/wuerfel#{gameBean.currentDiceValue}.png" title="#{msg.diceEyes} #{gameBean.currentDiceValue}" alt="#{msg.diceEyes} #{gameBean.currentDiceValue}"/>
                        </h:commandLink>
                    </h:form>
                </div>
                
                
                <div id="play_area">
                    <hr class="accessibility" />
                    <div id="board">
                        <h2 class="accessibility">#{msg.gameboard}</h2>
                        <div class="fields">
                            
                            <h3 class="accessibility">#{msg.fields}</h3>
                            <h:panelGroup id="fields">
                            <ol title="#{msg.fields}">
                                <ui:repeat var="fields" value="#{gameBean.boardFields}">
                                    <li>
                                        <h:graphicImage id="field" styleClass="field#{fields.fieldId}" value="resources/img/#{gameBean.fieldImageFilename(fields.fieldIndex)}" alt="#{gameBean.fieldTitle(fields.fieldIndex)}" title="#{gameBean.fieldTitle(fields.fieldIndex)}" />
                                    </li>
                                </ui:repeat>
                            </ol>
                            </h:panelGroup>
                            
                            <h3 class="accessibility">#{msg.startFields}</h3>
                            <h:panelGroup id="homefields">
                                <ui:repeat var="listedPlayers" value="#{gameBean.players}">
                                    <ol title="#{msg.startField} #{msg.player} #{listedPlayers.playerID+1}">
                                        <ui:repeat var="listedPlayersHomeFields" value="#{gameBean.getStartFields(listedPlayers.playerID)}">
                                        <li>
                                            <h:graphicImage id="homefield" styleClass="field#{listedPlayersHomeFields.fieldId}" value="resources/img/#{gameBean.fieldImageFilename(listedPlayersHomeFields.fieldIndex)}" alt="#{gameBean.fieldTitle(listedPlayersHomeFields.fieldIndex)}" title="#{gameBean.fieldTitle(listedPlayersHomeFields.fieldIndex)}"/>
                                        </li>
                                        </ui:repeat>
                                    </ol>
                                </ui:repeat>
                            </h:panelGroup>


                            <h3 class="accessibility">#{msg.finishFields}</h3>
                            <h:panelGroup id="goalfields">
                                <ui:repeat var="listedPlayers2" value="#{gameBean.players}">
                                    <ol title="#{msg.finishFields} #{msg.player} #{listedPlayers2.playerID+1}">
                                        <ui:repeat var="listedPlayersFinishFields" value="#{gameBean.getFinishFields(listedPlayers2.playerID)}">
                                            <li>
                                                <h:graphicImage id="finishfield" styleClass="field#{listedPlayersFinishFields.fieldId}" value="resources/img/#{gameBean.fieldImageFilename(listedPlayersFinishFields.fieldIndex)}" alt="#{gameBean.fieldTitle(listedPlayersFinishFields.fieldIndex)}" title="#{gameBean.fieldTitle(listedPlayersFinishFields.fieldIndex)}" />
                                            </li>
                                        </ui:repeat>
                                    </ol>
                                </ui:repeat>
                            </h:panelGroup>
                        </div>
                        <div class="clearer"></div>  
                        <div id="infogegner">#{msg.diceComputer}: <h:outputText id="oppInfo" value="#{gameBean.recentDiceValues}" /></div>
                    </div>
                </div>
                
                
            </ui:define>
        </ui:composition>
    </body>
</html>